<template>
    <div v-if="conversation" @click="openConversation"
         :class="{active:isSelected}"
          class="conversation">
      <el-avatar  shape="square"
                 :src="avatar"></el-avatar>
      <div class="unread" v-if="unreadCount>0" >{{unreadCount>99?'99+':unreadCount}}</div>
      <div class="text">
        <div class="name">{{name}}</div>

        <span v-if="!isRevoked" class="message">{{messageContent}}</span>
        <span v-else class="message">{{isOwn?'你':'对方'}}撤回了一条消息</span>
      </div>
      <!-- 删除会话 -->
      <div class="delete" @click.stop="removeConversation"><i class="el-icon-close"></i></div>
      <div class="time">
        {{messageTime}}
      </div>
    </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import TIM from 'tim-js-sdk'
  import tim from "@/tim";
  import {isToday,getTime,getDate} from "@/utils/date";

  export default {
        name: "Conversation",
      props:{
          conversation:{
            type:Object,
            default(){
              return {}
            }
          },
      },
      computed:{
          ...mapGetters([
            'id','friendList','currentConversation','conversationMessagesList'
          ]),
        // 获取头像
        avatar(){
          return this.conversation.userProfile.avatar
        },
        // 未读消息个数
        unreadCount(){
            return this.conversation.unreadCount
        },
        // 获取当前会话对象用户的昵称
        name(){
          return this.conversation.userProfile.nick
        },
        isSelected(){
          return this.conversation.conversationID
            === this.currentConversation.conversationID;
        },
        // 消息时间
        messageTime(){
          let {lastMessage} = this.conversation
            if(lastMessage){
              const date = new Date(lastMessage.lastTime * 1000)
              return isToday(date) ? getTime(date) : getDate(date);
            }else return ''
        },
        // 消息内容
        messageContent(){
          let {lastMessage} = this.conversation
          if(lastMessage){
            switch (lastMessage.type) {
              case TIM.TYPES.MSG_TEXT:// 文本消息
                return lastMessage.messageForShow
              case TIM.TYPES.MSG_IMAGE:
                return "[图片]"
              case TIM.TYPES.MSG_VIDEO:
                return "[视频]"
              case TIM.TYPES.MSG_FILE:
                return "[文件]"
            }
          }else return ''
        },
        // 消息是否为撤回
        isRevoked(){
            return  this.conversation.lastMessage.isRevoked;
        },
        isOwn(){
         return  this.conversation.lastMessage.fromAccount === this.id
        }
      },
      methods:{
        // 打开当前选择的会话窗口
        openConversation(){
          // 如果要切换的会话与当前会话一样，那就不做任何操作
          if(this.conversation.conversationID === this.currentConversation.conversationID){
            return
          }
          this.$store.dispatch('chat/checkoutConversation',this.conversation.conversationID)
          // 切换点击的会话为当前会话
         // this.$store.commit('chat/updateCurrentConversation',this.conversation)
         //  this.$store.dispatch('chat/getMessageList',this.conversation.conversationID)
        },
        // 删除会话
        removeConversation(){
          tim.deleteConversation(this.conversation.conversationID).then(()=>{
            console.log('会话删除成功，会话id：'+this.conversation.conversationID)
            this.$store.dispatch('chat/getConversationListTIM')
          }).catch(err=>{
            this.$store.commit('chat/showMessage',{
              message:err.message,
              info:'error'
            })
          })
        },
      }
    }
</script>

<style lang="scss" scoped>
  .conversation{
    display: flex;
    position: relative;
    width: 100%;
    height: 60px;
    font-size: 11px;
    /* 光标变小手 */
    cursor: pointer;
    color: #b0a4a4;
    .el-avatar{
      margin: 10px 12px;
    }
    .unread{
      position: absolute;
      left: 45px;
      min-width: 18px;
      height: 18px;
      text-align: center;
      line-height: 18px;
      border-radius: 50%;
      color: #ffffff;
      background-color: red;
    }
    .text{
      flex: 3;
      max-width: 180px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .name{
        margin: 12px 0 8px;
        font-size: 13px;
        color: black;
      }
    }
    .time{
      color: #5a5e66;
      padding-right:4px;
      margin-top: 20px;
    }
    .delete{
      position: absolute;
      right: -20px;
      color: black;
      font-size: 15px;
      transition: all 0.2s ease;
      &:hover{
        transform:  rotate(360deg) ;
        color: #20a0ff;
      }
    }
    &:hover{
      background-color: #e3e5e5;
      .delete{
        position: absolute;
        right: 3px;
      }
    }
  }
  .active{
    background-color: #c4c7c7;
  }
  .active:hover{
    transform:  rotate(360deg) ;
  }
</style>
